<template>
  <div class="notice-container">
    <span
      class="notice-wrapper"
      @click.stop="changeShow"
    >
      <el-badge
        class="notice-badge"
        :value="122"
        :max="99"
      >
        <i class="el-icon-bell notice-icon" />
      </el-badge>
    </span>
    <transition name="el-zoom-in-top">
      <div
        v-show="show"
        ref="showMenu"
        class="notice-menu shadow"
      >
        <el-tabs
          v-model="activeName"
          class="notice-tabs"
          :stretch="true"
        >
          <el-tab-pane
            label="通知"
            name="notice"
            :lazy="true"
          >
            <div class="notice-tab-pane">
              <div class="notice-item-list">
                <div class="notice-item">
                  <div class="avatar red">
                    <span class="avatar-icon el-icon-message" />
                  </div>
                  <div class="content">
                    <div class="title">
                      你收到了 14 份新周报
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
                <div class="notice-item">
                  <div class="avatar">
                    <span class="avatar-icon el-icon-user-solid" />
                  </div>
                  <div class="content">
                    <div class="title">
                      你推荐的 曲妮妮 已通过第三轮面试
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
                <div class="notice-item">
                  <div class="avatar green">
                    <span class="avatar-icon el-icon-plus" />
                  </div>
                  <div class="content">
                    <div class="title">
                      这种模板可以区分多种通知类型
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
                <div class="notice-item">
                  <div class="avatar red">
                    <span class="avatar-icon el-icon-message" />
                  </div>
                  <div class="content">
                    <div class="title">
                      你收到了 14 份新周报
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
                <div class="notice-item">
                  <div class="avatar">
                    <span class="avatar-icon el-icon-user-solid" />
                  </div>
                  <div class="content">
                    <div class="title">
                      你推荐的 曲妮妮 已通过第三轮面试
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
                <div class="notice-item">
                  <div class="avatar green">
                    <span class="avatar-icon el-icon-plus" />
                  </div>
                  <div class="content">
                    <div class="title">
                      这种模板可以区分多种通知类型
                    </div>
                    <div class="desc">
                      一年前
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="消息"
            name="message"
            :lazy="true"
          >
            <empty-box />
          </el-tab-pane>
          <el-tab-pane
            label="代办"
            name="task"
            :lazy="true"
          >
            <empty-box />
          </el-tab-pane>
        </el-tabs>
      </div>
    </transition>
  </div>
</template>

<script>
import Vue from 'vue';
import EmptyBox from '@/components/EmptyBox';
import {Badge, TabPane, Tabs} from "element-ui";

Vue.use(Badge);
Vue.use(Tabs);
Vue.use(TabPane);
/**
 * 通知栏
 * @author maolin
 */
export default {
  name: 'NoticeBar',
  components: {
    EmptyBox
  },
  data () {
    return {
      show: false,
      activeName: 'notice'
    };
  },
  created () {
    document.addEventListener('click', (e) => {
      if (this.$refs.showMenu) {
        let isSelf = this.$refs.showMenu.contains(e.target);
        if (!isSelf) {
          this.show = false;
        }
      }
    });
  },
  methods: {
    /**
     * 显示通知栏
     * @public
     */
    changeShow () {
      this.show = true;
    }
  }
};
</script>

<style scoped lang="scss">
  .notice-container{
    position: relative;
    .notice-wrapper{
      .notice-badge{
        margin-top: 10px;
        height: 40px;
        line-height: 30px;
      }

    }
    .notice-menu{
      position: absolute;
      top: 55px;
      right: 0;
      width: 297px;
      height: 297px;
      background-color: #fff;
      z-index: 99;
      border-radius: 4px;
      .notice-tabs{
        height: 45px;
        line-height: 45px;
        .notice-tab-pane{
          max-height: 222px;
          width: 100%;
          padding: 0 15px;
          overflow-y: scroll;
          .notice-item-list{
            .notice-item{
              border-bottom: 1px solid #f0f0f0;
              display: flex;
              flex-wrap: nowrap;
              padding: 12px 0;
              &:last-child{
                border-bottom: none;
              }
              .avatar{
                width: 32px;
                height: 32px;
                border-radius: 100%;
                overflow: hidden;
                background-color: #4c91df;
                color: #fff;
                text-align: center;
                line-height: 32px;
                margin-right: 16px;
                &.red{
                  background-color: #ec685f;
                }
                &.green{
                  background-color: #4da9ab;
                }
              }
              .content{
                width: calc(100% - 48px);
                font-size: 14px;
                line-height: 22px;
                .title{
                  color: rgba(0,0,0,0.65);
                  font-weight: bold;
                }
                .desc{
                  color: rgba(0,0,0,0.45);
                }
              }
            }
          }
        }
      }
    }

  }

</style>
